<script setup>
import { ref, reactive } from "vue";

defineProps({
  count: Number,
  arr: Array,
});
</script>

<template>
  <div class="top_BOX">
    <el-steps space="20%" :active="count" align-center>
      <el-step
        v-for="(v, i) in arr"
        :key="i"
        :title="v.status"
        :description="v.date"
      >
        <template #icon>
          <div class="icon_finish" v-if="i < count">
            <el-icon :size="20"><SuccessFilled /></el-icon>
          </div>
          <div class="icon_unfinished" v-else>
            <el-icon :size="20"><component :is="v.icon" /></el-icon>
          </div>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>

<style scoped lang="scss">
.top_BOX {
  padding: 2rem 1rem;
  width: 100%;
}

.icon_finish {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: #eee solid 1px;
  border-radius: 50%;
}
.icon_unfinished {
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: #eee solid 3px;
  border-radius: 50%;
}
</style>
